/* eslint-disable space-before-blocks */
<template>
  <div class="draft">
    <h1>草稿箱({{a}})</h1>
    <div v-if="draftData">
      <el-card @click.native="getDraft" v-for="(item, index ) in draftData" :key="index">
        <h1 class="title" @click.stop="useDraft(index)">{{item.title}}</h1>
        <p>{{item.curday}}</p>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      draftData: []
    }
  },
  methods: {
    getDraft () {
      const data = JSON.parse(localStorage.getItem('drafts'))
      this.draftData = data
    },
    useDraft (index) {
      this.$emit('draftData', this.draftData[index])
    }
  },
  mounted () {
    this.getDraft()
  },
  watch: {
    localStorage (val) {
      console.log(val)
    }
  },
  computed: {
    a () {
      const num = this.draftData ? this.draftData.length : 0
      return num
    }
  }
}
</script>

<style  lang="less" scoped>
.draft{
    font-size: 12px;
    width: 100%;
    h1{
        width: 70%;
        font-size: 13px;
        padding: 10px 0;
        font-size: 15px;
        line-height: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .el-card{
        margin: 5px 0;
        .title{
            &:hover{
                cursor: pointer;
                color: orange;
                text-decoration: underline;
            }
        }
        p{
            color: gray;
        }
    }
    /deep/.el-card__body{
        padding: 3px ;
    }
}
</style>
